<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>无忧微贷</title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
	<script type="text/javascript" src="../js/rem.js"></script>
</head>

<body>
	<div class="m-passport">
		<h3 class="title-1 f-pr">
			<span>登录</span>
			<span class="f-pa" @tap="back()">
					<i class="icon-angle-left f-fl"></i>
					<small>返回</small>
				</span>
		</h3>
		<div class="info">
			<div class="avator"><img src="../images/avator.png"></div>
			<p v-text="mobile"></p>
		</div>
		<div class="input-box input-box-1">
			<ul>
				<li>
					<i class="icon password-icon"></i>
					<input type="password" ref="login_password" placeholder="请输入登录密码" v-model="password">
					<i class="unsee-icon f-pa" @tap="changeAttr()"></i>
				</li>
			</ul>
		</div>
		<a v-if="password" class="btn btn-1 active" @tap="login()">登录</a>
		<a v-else class="btn btn-1" @tap="login()">登录</a>
		<div class="tips">
			<a @tap="routes({url: 'findpassword.html'})">忘记密码</a>
			<a @tap="routes({url: 'passport.html'})">切换账号</a>
		</div>
	</div>
	<script type="text/javascript" src="../js/md5.min.js"></script>
	<script type="text/javascript" src="../js/zepto.min.js"></script>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>

	<script type="text/javascript">
		mui.plusReady(function () {
			var vm = new Vue({
				el: '.m-passport',
				data: {
					mobile: plus.webview.currentWebview().mobile,
					password: '',
					see: false
				},
				methods: {
					back: function () {
						mui.back();
					},
					routes: function (data) {
						mui.openWindow({
							url: data.url,
							show: {
								aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							}
						});
					},
					
					validate: function(){
						var password = this.password;
						if (password === '') {
							mui.toast('密码不能为空');
							return false;
						}
						if (password.length < 6 || password.length > 16) {
							mui.toast('密码长度必须为6~16位字符');
							return false;
						}
						return true;
					},
					
					login: function(){
						document.activeElement.blur();
						if (!this.validate()) {
							return false;
						} else {
							mui.ajax(base + 'passport/login', {
								data: {
									'account': plus.webview.currentWebview().mobile,
									'password': this.password
								},
								dataType: 'json',
								type: 'post',
								headers: sign(md5),
								success: function (data) {
									console.log('登录:' + JSON.stringify(data))
									if (data.result) {
										plus.storage.setItem('user_id', data.user_id + '');
										//触发个人中心页面登录成功自定义事件
										var accountwebview = plus.webview.getWebviewById('html/account.html');
										mui.fire(accountwebview, 'loginSuccess', {});
										// plus.webview.getWebviewById('html/account.html').evalJS("init();");
										plus.webview.getWebviewById('passport.html').close();
										plus.webview.currentWebview().close();
									}
									mui.toast(data.message);
								},
								error: function (data) {
									mui.toast(JSON.stringify(data));
								}
							})
						}
					},
					
					changeAttr: function(){
						var obj = this.$refs.login_password;
						if(!this.see){
							this.see = true;
							obj.setAttribute('type', 'text');
						}else{
							this.see = false;
							obj.setAttribute('type', 'password');
						}
					}
				}
			});
			
			//回车事件
			window.addEventListener('keyup', function(event) {
				if(event.keyCode == 13) {
					return vm.login();
				}
			}, false);
		});
	</script>
</body>

</html>